
<template>
  <scroll-view scroll-y class="scroll-container">
    <!-- 顶部轮播图 -->
	<view class="video-box">
		<text>泉州风光</text>
    <swiper class="swiper" autoplay interval="3000" circular>
      <swiper-item v-for="(img, index) in swiperImgs" :key="index">
        <image :src="img" class="swiper-img" mode="widthFix"></image>
      </swiper-item>
    </swiper>
	</view>

    <!-- 城市介绍 -->
	<view class="video-box">
    <rich-text :nodes="cityIntro"></rich-text>
	</view>
    <!-- 探索进度 -->
    <view class="progress-box">
      <text>当前进度: {{ progress }}%</text>
      <progress :percent="progress" show-info></progress>
    </view>

    <!-- 城市选择 -->
    <view class="picker-box">
      <text>选择城市</text>
      <picker mode="region" @change="onRegionChange">
        <view class="picker-text">{{ selectedCity || '福建省泉州市丰泽区' }}</view>
      </picker>
    </view>

    <!-- 偏好设置 -->
    <view class="preference-box">
      <text>偏好设置</text>
      <view class="radio-group">
        <text>出行方式:</text>
        <radio-group @change="onTravelModeChange">
          <label><radio :value="1" :checked="travelMode === 1" />公交</label>
          <label><radio :value="2" :checked="travelMode === 2" />自驾</label>
          <label><radio :value="3" :checked="travelMode === 3" />步行</label>
        </radio-group>
      </view>
      <view class="switch-box">
        <text>显示推荐景点:</text>
        <switch :checked="showRecommend" @change="onShowRecommendChange"></switch>
      </view>
      <view class="slider-box">
        <text>探索半径: {{ radius }}km</text>
        <slider :value="radius" @change="onRadiusChange" min="1" max="20"></slider>
      </view>
    </view>

    <!-- 媒体展示 -->
    <view class="video-box">
      <text>城市宣传视频</text>
      <video :src="videoSrc" controls></video>
    </view>
	<!-- 带进度条的音频模块 -->
	<view class="audio-box">
	  <text class="audio-title">泉州南音欣赏</text>
	  
	  <view class="audio-controls">
	    <!-- 播放/暂停按钮 -->
	    <button 
	      class="play-btn" 
	      type="primary" 
	      @click="togglePlay"
	    >
	      {{ audioPlaying ? '暂停' : '播放' }}
	    </button>
	    
	    <!-- 进度条区域 -->
	    <view class="progress-area">
	      <!-- 进度条 -->
	      <slider 
	        :value="progressPercent" 
	        @change="onProgressChange"
	        min="0" 
	        max="100" 
	        step="1"
	        activeColor="#007AFF"
	        backgroundColor="#eee"
	        class="audio-slider"
	      />
	      
	      <!-- 时间显示 -->
	      <view class="time-display">
	        <text class="current-time">{{ formatTime(currentTime) }}</text>
	        <text class="total-time">{{ formatTime(duration) }}</text>
	      </view>
	    </view>
	  </view>
	  
	  <text class="audio-desc"></text>
	</view>
  </scroll-view>
  
</template>

<script>
export default {
  data() {
    return {
      // 轮播图图片地址
      swiperImgs: [
        '/static/city1.png',
        '/static/city2.jpg',
        '/static/city3.jpg'
      ],
      // 城市介绍富文本内容
      cityIntro: `<div><h3 style="color: #333;">海上丝绸之路起点 - 泉州</h3><p>历史文化：<strong>泉州</strong>是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p><p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p><p>特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p></div>`,
      // 探索进度
      progress: 68,
      // 选中的城市
      selectedCity: '',
      // 出行方式（1：公交，2：自驾，3：步行）
      travelMode: 1,
      // 是否显示推荐景点
      showRecommend: true,
      // 探索半径
      radius: 10,
      // 视频地址
      videoSrc: '/static/city-video.mp4',
	  music:'/static/city-music.mp3',
	   
	      // ...原有其他数据（省略）
	      audioContext: null,      // 音频上下文
	      audioPlaying: false,     // 播放状态
	      currentTime: 0,          // 当前播放时间（秒）
	      duration: 0,             // 总时长（秒）
	      progressPercent: 0       // 进度百分比
	
    };
  },
     onLoad() {
       // ...原有其他初始化（省略）
       // 初始化音频上下文
       this.audioContext = uni.createInnerAudioContext();
       this.audioContext.src = '/static/city-music.mp3'; // 音频文件路径
       
       // 监听音频可以播放（获取总时长）
       this.audioContext.onCanplay(() => {
         this.duration = this.audioContext.duration || 0;
       });
       
       // 监听播放进度更新
       this.audioContext.onTimeUpdate(() => {
         this.currentTime = this.audioContext.currentTime || 0;
         this.progressPercent = this.duration ? Math.floor((this.currentTime / this.duration) * 100) : 0;
       });
       
       // 监听播放结束
       this.audioContext.onEnded(() => {
         this.audioPlaying = false;
         this.currentTime = 0;
         this.progressPercent = 0;
       });
     },

methods: {
  // ...原有其他方法（省略）
 
  // 播放/暂停切换
  togglePlay() {
    if (this.audioPlaying) {
      this.audioContext.pause();
    } else {
      this.audioContext.play();
    }
    this.audioPlaying = !this.audioPlaying;
  },
  
  // 进度条拖动调整进度
  onProgressChange(e) {
    const percent = e.detail.value;
    this.progressPercent = percent;
    const seekTime = (percent / 100) * this.duration;
    this.audioContext.seek(seekTime);
  },
  
  // 格式化时间（秒 -> 分:秒）
  formatTime(seconds) {
    if (!seconds) return '00:00';
    const min = Math.floor(seconds / 60);
    const sec = Math.floor(seconds % 60);
    return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
  }
},
onUnload() {
  // ...原有其他卸载逻辑（省略）
  if (this.audioContext) {
    this.audioContext.destroy();
  }
}

};
</script>


<style scoped>
.scroll-container {
  height: 100vh;
  width: 100%;
}
.swiper {
  height: 300rpx;
}
.swiper-img {

  width: 100%;
  height: 100%;
}
.progress-box, .picker-box, .preference-box, .video-box {
  margin: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.radio-group, .switch-box, .slider-box {
  margin-top: 20rpx;
}
</style>